[자바스크립트] 드래그앤드랍 draggable IE9 안되는 문제

Last Modified : 2015-10-29 / Created : 2015-10-01

5,405
View Count

주소 복사하기

HTML 5에서부터 지원되는 드래그앤드랍(Drag & Drop) 기능이 IE 9에서는 정상적으로 동작하지 않는 경우가 많습니다. CSS3가 익스플로러에서 정상적으로 지원되지 않기 때문이라는 의견도 있지만 자바스크립트만으로 해결된다는 글도 많아 단순하게 CSS3 문제라고 보기에도 무리가 있어보입니다. 해결가능한 방법에 대하여 알아볼까 합니다.

* 아래 내용들은 해결되었다는 몇가지 방법들에 대한 정리 내용입니다.

1. 태그를 변경하기

div 태그에서 draggable 속성을 사용하지 않는 방법입니다. 아래처럼요

<div draggable='true'>DragElement</div>

위 태그를 아래와 같이 변경합니다.

<a draggable='true'>DragElement</a>

위 방법은 해결할 수 있는 방법 중 하나이나 모든 환경에서 100% 해결된다고 보장하지는 못합니다.

2. 스크립트를 사용하는 방법

아래 코드는 테스트가 필요하겠지만 해결 가능하다고 보이는 스크립트 코드입니다. IE 9 에 적용합니다.

if (document.doctype && navigator.appVersion.indexOf("MSIE 9") > -1) {
document.addEventListener('selectstart', function (e) {
for (var el = e.target; el; el = el.parentNode) {
if (el.attributes && el.attributes['draggable']) {
e.preventDefault();
e.stopImmediatePropagation();
el.dragDrop();
return false;
}
}
});
}

아래의 글도 찾고 계시지 않나요?

[HTML5] 파일 업로드시 다중 선택 및 드래그 이동 방법

폼태그에서 그룹화하는 fieldset 태그